<template>
  <div id="app">
    <table class="tb">
      <tr>
        <th>编号</th>
        <th>品牌名称</th>
        <th>创立时间</th>
        <th>操作</th>
      </tr>
      <!-- 循环渲染的元素tr -->
      <tr v-for="(item,index) in list" :key=item.id >
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.time}}</td>
        <td>
          <button @click="deleted(item.id)">删除</button>
           <button @click="ade">添加</button>
        </td>
      </tr>
      <tr v-show="list.length<=0">
        <td colspan="4">没有数据咯~</td>
      </tr>
    </table>

 <div class="form" v-show=!kiss >
      <div class="form-item">
        <div class="label">品牌名称：</div>
        <div class="input">
          <input v-model.trim="name" type="text" placeholder="请输入品牌名称" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">创立时间：</div>
        <div class="input">
          <input v-model.number="time" type="text" placeholder="请输入创立时间" />
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button @click="add" class="submit" >添加</button>
        </div>
      </div>
    </div>




 </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 101, name: "奔驰", time: "2020-08-01" },
        { id: 201, name: "宝马", time: "2020-08-02" },
        { id: 131, name: "奥迪", time: "2020-08-03" },
      ],
      name:'',
      time:'',
      kiss:true
    };
  },
  methods:{
     ade(){
        this.kiss=false
     },
    deleted(id){
         const Index=this.list.findIndex((item)=>item.id===id)
         this.list.splice(Index,1)
    },
    add(){
       this.list.push({
        id:Date.now(),
        name:this.name,
        time:this.time

       })
      
    }
  }
};
</script>

<style  lang="less">
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}

.form {
    flex: 1;
    padding: 20px;

   .form-item {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
    }
    .form-item .label {
      width: 60px;
      text-align: right;
      font-size: 14px;
    }
    .form-item .input {
      flex: 1;
    }
    .form-item input,
    .form-item select {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 200px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
    }
    .form-item input::placeholder {
      color: #666;
    }
    .form-item .cancel,
    .form-item .submit {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 4px 10px;
      margin-right: 10px;
      font-size: 12px;
      background: #ccc;
    }
    .form-item .submit {
      border-color: #069;
      background: #069;
      color: #fff;
    }
  }
</style>
